<template>
  <el-container>
    <el-aside width="65%">
      <div class="shang">
        <el-row>
          <el-col :span="3"
            ><div class="grid-content lineheight img">
              <img
                :src="require('../assets/images/' + touxiang + '.jpg')"
                alt=""
              /></div
          ></el-col>
          <el-col :span="12"
            ><div class="grid-content">
              <el-col
                ><div class="grid-content lineheight">
                  你好，{{ name }}，祝你开心每一天！
                </div></el-col
              >
              <el-col
                ><div class="grid-content wenzi lineheight">
                  {{ postname }}|原型杂货铺-研发中心-{{ department }}
                </div></el-col
              >
            </div>
          </el-col>
          <el-col :span="3"
            ><div class="grid-content">
              <el-col
                ><div class="grid-content wenzi lineheight">
                  本月迟到次数
                </div></el-col
              >
              <el-col><div class="grid-content lineheight">3</div></el-col>
            </div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content">
              <el-col
                ><div class="grid-content wenzi lineheight">
                  审批中的流程
                </div></el-col
              >
              <el-col><div class="grid-content lineheight">1</div></el-col>
            </div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content">
              <el-col
                ><div class="grid-content wenzi lineheight">
                  今日打卡时间
                </div></el-col
              >
              <el-col
                ><div class="grid-content wenzi2">
                  <span>{{ clock }}</span>
                </div></el-col
              >
            </div></el-col
          >
        </el-row>
        <div id="kuaisu" class="wenzi kuaisu">
          <el-row>
            <el-col :span="22"><div class="">快速申请</div></el-col>
            <el-col :span="2"><div class="">更多</div></el-col>
          </el-row>
          <hr />
          <span><router-link to="/home/leave">请假申请</router-link> </span>
          <span
            ><router-link to="/home/personalcenter/myperformance"
              >绩效管理</router-link
            >
          </span>
          <span><router-link to="/home/meeting">会议室预定</router-link> </span>
        </div>
      </div>
      <div id="" class="wenzi kuaisu">
        <el-row>
          <el-col :span="22"><div class="">工作签批</div></el-col>
        </el-row>
        <hr />
        <el-tabs @tab-click="handleClick">
          <el-tab-pane :label="daiban1" name="first"></el-tab-pane>
          <el-tab-pane :label="yiban1" name="second"></el-tab-pane>
        </el-tabs>
        <el-table
          :data="chuli == 'daiban' ? daibanData1 : yibanData1"
          stripe
          style="width: 100%"
        >
          <el-table-column prop="mun" label="流水号" width=""></el-table-column>
          <el-table-column
            prop="qing"
            label="申请类型"
            width=""
          ></el-table-column>
          <el-table-column prop="name" label="发起人" width="">
          </el-table-column>
          <el-table-column
            prop="department_name"
            label="发起人所属部门"
            width="150"
          >
          </el-table-column>
          <el-table-column prop="state" label="当前环节" width="">
          </el-table-column>
          <el-table-column prop="starttime" label="开始时间" width="">
          </el-table-column>
          <el-table-column prop="endtime" label="结束时间" width="">
          </el-table-column>
          <el-table-column prop="applytime" label="申请时间" width="">
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            :current-page.sync="page"
            layout="total, prev, pager, next"
            :total="chuli == 'daiban' ? daibanData.length : yibanData.length"
            :page-size="count"
          >
          </el-pagination>
        </div>
      </div>
    </el-aside>
    <el-container>
      <el-main>
        <el-card class="box-card shang">
          <div slot="header" class="clearfix">
            <span>公告通知</span>
            <el-button style="float: right; padding: 3px 0" type="text"
              ><router-link to="/home/information">更多</router-link></el-button
            >
          </div>
          <div
            v-for="o in gonggaoData.length >= 4 ? 4 : gonggaoData.length"
            :key="o"
            class="text item gonggao"
          >
            <span>{{ "【" + gonggaoData[o - 1].notice_className + "】" }}</span>
            <span>{{ gonggaoData[o - 1].notice_title }}</span>
            <span>{{ gonggaoData[o - 1].notice_time }}</span>
          </div>
        </el-card>
        <div class="rili">
          <el-calendar v-model="value"> </el-calendar>
          <el-card class="box-card">
            <div class="text item">
              今日行程：10:00-11:00 301会议室--考勤制度需求变更确认会议
            </div>
          </el-card>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import axios from "@/utils/http";
export default {
  data() {
    return {
      // aaa: "figure1",
      // name: "figure1",
      // clock: "figure1",
      // postname: "figure1",
      value: new Date(),
      daiban: "待办",
      yiban: "已办",
      tableData: [],
      daibanData: [],
      daibanData1: [],
      yibanData: [],
      yibanData1: [],
      chuli: "daiban",
      gonggaoData: [],
      count: 5,
      page: 1,
      zhanghao: "",
    };
  },
  computed: {
    //待办表格
    daiban1: function () {
      if (this.tableData.length >= 1) {
        this.daibanData = [];
        for (let i = 0; i < this.tableData.length; i++) {
          if (this.tableData[i].state == "待审核") {
            this.daibanData.push(this.tableData[i]);
          }
        }
        this.daibanData1 = this.daibanData.slice(
          (this.page - 1) * this.count,
          this.page * this.count
        );
      }
      return this.daiban + "(" + this.daibanData.length + ")";
    },
    //已办表格
    yiban1: function () {
      if (this.tableData.length >= 1) {
        this.yibanData = [];
        for (let i = 0; i < this.tableData.length; i++) {
          if (this.tableData[i].state == "已审核") {
            // console.log(1);
            this.yibanData.push(this.tableData[i]);
          }
        }
        this.yibanData1 = this.yibanData.slice(
          (this.page - 1) * this.count,
          this.page * this.count
        );
      }
      return this.yiban + "(" + this.yibanData.length + ")";
    },
    name: function () {
      if (this.$store.state.data.name) {
        this.zhanghao = this.$store.state.data.account;
        return this.$store.state.data.name;
      } else {
        this.zhanghao = JSON.parse(sessionStorage.getItem("user")).account;
        return JSON.parse(sessionStorage.getItem("user")).name;
      }
    },
    postname: function () {
      if (this.$store.state.data.post_name) {
        return this.$store.state.data.post_name;
      } else {
        return JSON.parse(sessionStorage.getItem("user")).post_name;
      }
    },
    clock: function () {
      if (this.$store.state.data.clock_time) {
        return this.$store.state.data.clock_time;
      } else {
        return JSON.parse(sessionStorage.getItem("user")).clock_time;
      }
    },
    touxiang: function () {
      if (this.$store.state.data.figure) {
        return this.$store.state.data.figure;
      } else {
        return JSON.parse(sessionStorage.getItem("user")).figure;
      }
    },
    department: function () {
      if (this.$store.state.data.department_name) {
        return this.$store.state.data.department_name;
      } else {
        return JSON.parse(sessionStorage.getItem("user")).department_name;
      }
    },
  },
  mounted: function () {
    // if (this.$store.state.data.name) {
    //     this.zhanghao=this.$store.state.data.name;
    //     return this.$store.state.data.name;
    //   } else {
    //     this.zhanghao=JSON.parse(sessionStorage.getItem("user")).name;
    //     return JSON.parse(sessionStorage.getItem("user")).name;
    //   }
    this.tongzhi();
  },
  methods: {
    //审批表格切换
    handleClick(tab) {
      if (tab.name == "first") {
        this.chuli = "daiban";
        if (this.tableData.length >= 1) {
          this.daibanData = [];
          for (let i = 0; i < this.tableData.length; i++) {
            if (this.tableData[i].state == "待审核") {
              this.daibanData.push(this.tableData[i]);
            }
          }
          this.daibanData1 = [];
          this.daibanData1 = this.daibanData.slice(
            (this.page - 1) * this.count,
            this.page * this.count
          );
        }
      } else if (tab.name == "second") {
        this.chuli = "yiban";
        // console.log(this.chuli);
        if (this.tableData.length >= 1) {
          for (let i = 0; i < this.tableData.length; i++) {
            if (this.tableData[i].state == "已审核") {
              this.yibanData.push(this.tableData[i]);
            }
          }
          this.yibanData1 = [];
          this.yibanData1 = this.yibanData.slice(
            (this.page - 1) * this.count,
            this.page * this.count
          );
        }
      }
    },
    //通知、公告使用异步处理函数，避免同时发送两个axios请求导致提醒弹框出现两次
    tongzhi: async function () {
      let res1 = await axios({
        url: "/home/get_shenpi",
        method: "get",
        params: {
          account: this.zhanghao,
        },
      }).then((res) => {
        if (res.data.code == 200) {
          this.tableData = res.data.data;
          this.$store.commit("daiban", res.data.data);
          sessionStorage.setItem("shenpi", JSON.stringify(res.data.data));
        }else{
          this.tableData = [];
          this.$store.commit("daiban", []);
          sessionStorage.setItem("shenpi", JSON.stringify([]));
        }
        // return 1;
        // console.log(res.data.data);
      });
      await axios({
        url: "/home/get_gonggao",
        method: "get",
      }).then((res) => {
        this.gonggaoData = res.data.data;
      });
    },
  },
};
</script>

<style scoped>
.el-container,
.el-aside,
.el-main {
  background-color: rgb(242, 242, 242);
  color: #333;
}
.el-row {
  margin-top: 20px;
}
.el-row,
.kuaisu {
  background: rgb(255, 255, 255);
  margin: 22px;
  border-radius: 4px;
}
.lineheight {
  line-height: 36px;
}
.img {
  text-align: right;
  padding: 1px 10px;
}
img {
  width: 80%;
  border-radius: 50px;
}
.wenzi {
  font-size: 13px;
}
.wenzi2 {
  font-size: 13px;
}
.el-row > .el-col:nth-child(4) {
  border-left: 1px solid #999;
  border-right: 1px solid #999;
}
.el-row > .el-col:nth-child(3),
.el-row > .el-col:nth-child(4),
.el-row > .el-col:nth-child(5) {
  text-align: center;
}
.el-row > .el-col:nth-child(3) div:nth-child(2),
.el-row > .el-col:nth-child(3) div:nth-child(2),
.el-row > .el-col:nth-child(4) div:nth-child(2) {
  margin-left: 20px;
  font-size: 30px;
}
hr {
  border-top: 1px solid rebeccapurple;
  margin: 10px 0;
}
.kuaisu {
  padding: 2px 20px 20px 20px;
}
.kuaisu > .el-row {
  text-align: left;
  margin-left: 10px;
  font-weight: 900;
  font-size: 15px;
}
.kuaisu > span {
  display: inline-block;
  text-align: center;
  width: 33.3%;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
.shang {
  height: 230px;
}
.rili {
  margin-top: 24px;
  border-radius: 4px;
}
.el-card {
  border: none;
  width: 100%;
}
.el-pagination {
  margin-top: 33px;
}
.gonggao span {
  display: inline-block;
  height: 17px;
  overflow: hidden;
}
.gonggao span:first-child {
  color: rgb(64, 158, 255);
  width: 20%;
}
.gonggao span:nth-child(2) {
  width: 55%;
}
.gonggao span:nth-child(3) {
  width: 20%;
  margin-left: 5%;
}
</style>
<style>
.rili .el-calendar-table .el-calendar-day {
  height: 35px;
}
.el-main .el-card.is-always-shadow {
  box-shadow: none;
}
.el-calendar {
  border-radius: 4px;
}
</style>